<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 220px;
        height: 300px;
        margin: 50px auto;
        position: relative;
        background: #ccc;
    }

    .box:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 5px solid red;
        clip: rect(0 220px 5px 0);
        animation: animate 2s linear infinite;
    }

    @keyframes animate {
        0% {
            clip: rect(0 220px 5px 0);
        }

        25% {
        	clip: rect(0 220px 300px 215px);
        }

        50% {
            clip: rect(295px 220px 300px 0);
        }

        75% {
            clip: rect(0 5px 300px 0);
        }

        100% {
            clip: rect(0 220px 5px 0);

        }
    }
    </style>
</head>

<body>
    <div class="page">
        <div class="box"></div>
    </div>
</body>

</html>